<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="../css/shoping.css">
    <script src="../js/jquery-3.6.0.min.js"></script>
    <script src="../js/interface.js"></script>
    <script src="../js/cookie.js"></script>
</head>

<body>
    <div class="header">
        <img src="../imges/header.png" alt="">
    </div>

    <div class="shop all">
        <p>我的购物车</p>
    </div>
    <!-- 主体 -->
    <div class="centent all">
        <span>游戏商品</span>
        <span>其他商品</span>
        <div class="cc">
            <!-- <div>
                <input type="checkbox" class="checklist">
                <img src="../imges/1 (10).jpg" alt="">
                <div class="jia">
                    <p>PS4</p>
                    <p>黎明杀机</p>
                </div>
                <div class="zhuji">类型：主机类游戏</div>
                <div class="monye">185.00</div>
                <div class="last">
                    <span>-</span>
                    <span>1</span>
                    <span>+</span>
                    <span>删除</span>
                </div>
            </div> -->

        </div>
        <div class="quanxuan">
            <div>
                <input type="checkbox" class="checkOne">
                <p>全选</p>
            </div>
            <p class="remove">删除</p>
        </div>
    </div>
    <!-- 结算 -->
    <div class="xiaoji all">
        <div class="fl">
            <div>
                <span>*</span> 收货姓名：<input type="text">
            </div>
            <div>
                <span>*</span> 联系方式：<input type="text">
            </div>
            <div>
                <span>*</span> 收货地址：<input type="text">
            </div>
        </div>
        <div class="fr">
            <p><span>总价格为</span><span class="qian">￥0.00</span></p>
            <p><a href="">确认付款</a></p>
        </div>
    </div>
    <!-- 尾部 -->
    <div class="footer all">
        <div class="footer-left fl">
            <div class="footer-top">
                <div>
                    <h3>客服中心</h3>
                    <p>客服在线时间:09:00 - 21:00</p>
                    <p>客服QQ: 123456789</p>
                </div>
                <div>
                    <h3>售后服务</h3>
                    <p>退款政策</p>
                    <p>换货政策</p>
                </div>
                <div>
                    <h3>关于</h3>
                    <p>
                        <span>招聘信息</span>
                        <span>网站地图</span>
                        <span>联系我们</span>
                        <span>媒体信息</span>
                    </p>
                </div>
            </div>
        </div>
        <div class="footer-right fr">
            <img src="../imges/sao.jpg" alt="">
            <p>3DM商城APP</p>
        </div>
        <div class="footer-bootom ">
            <p>CopyRight@2003-2018 www.3DMGAME.COM All Right Reserved</p>
            <p>京ICP备14006952号-1京网文(2016)1650-207号沪公网安备31011202006753号</p>
        </div>
    </div>
</body>
<script>
    var num = getCookie("lgc")
    $(function () {
        loadGoods()
        async function loadGoods() {
            var res = await searchAllGoods(num);
            console.log(res);
            var { status, message, list } = res;
            if (status) {
                if (list.length > 0) {
                    var html = "";
                    list.forEach(({ title, img, money, number, id }) => {
                        html += `<div><div>
            <input type="checkbox"  class="checklist">
            <img src="${img}" alt="">
            </div>
            <div class="jia">
                <p>PS4</p>
                <p>${title}</p>
            </div>
            <div class="zhuji">类型：主机类游戏</div>
            <div class="monye">${money}.00</div>
            <div class="last">
                <span class="jian">-</span>
                <span class="duoshao">${number}</span>
                <span class="jiac">+</span>
                <span class="delete">删除</span>
            </div><div class="xiaoshi">,${id}</div></div>`;
                    })
                    $(".cc").html(html);
                }
            }
        }
    })

    $(".centent").on("click", ".checkOne", function () {
        var status = this.checked;
        for (var i = 0; i < $(".checklist").length; i++) {
            var checkOne = $(".checklist")[i]
            checkOne.checked = status;
        }
        getTotal()
    })
    $(".centent").on("click", ".checklist", function () {
        isAllChecked()
        getTotal()
    })
    $(".centent").on("click", ".jian", function () {
        var num = $(this).next().text();
        if (num <= 1) {
            return false;
        }
        num--;
        $(this).next().text(num);
        getTotal()
        $.ajax({
            type: "post",
            url: "../php/shuliang.php",
            data: { id: $(this).parent().parent().find(".xiaoshi").text(), number: $(this).next().text() },
            dataType: "json",
        })
    })
    $(".centent").on("click", ".jiac", function () {
        var num = $(this).prev().text();
        num++;
        $(this).prev().text(num);
        getTotal()
        $.ajax({
            type: "post",
            url: "../php/shuliang.php",
            data: { id: $(this).parent().parent().find(".xiaoshi").text(), number: $(this).prev().text() },
            dataType: "json",
        })
    })
    $(".centent").on("click", ".delete", function () {
        $(this).parent().parent().remove()
        isAllChecked()
        getTotal()
        $.ajax({
            type: "get",
            url: "../php/shanchu.php",
            data: { id: $(this).parent().parent().find(".xiaoshi").text().slice(1) },
            dataType: "json",
        })
    })
    $(".centent").on("click", ".remove", function () {
        var aaa = $(".checklist:checked").parent().parent().find(".xiaoshi").text().slice(1)
        $.ajax({
            type: "get",
            url: "../php/shanchu.php",
            data: { id: aaa },
            dataType: "json",
        })
        $(".checklist:checked").parent().parent().remove();
        isAllChecked()
        getTotal()
    })

    function isAllChecked() {
        var flag = Array.from($(".checklist")).every(checkOne => $(checkOne).prop("checked"))
        flag = $(".checklist").length == 0 ? false : flag;
        $(".checkOne").prop("checked", flag)
    }
    function getTotal() {
        var money = 0;
        $(".checklist:checked").each(function () {
            var num = Number(($(this).parent().parent().find(".monye").text())) * Number($(this).parent().parent().find(".duoshao").text());
            money = (money + num) * 1;
        })
        $(".qian").text("￥" + money.toFixed(2))
    }

</script>

</html>